<template>
<div class="show-project">
  <el-dialog class="show-project__dialog" title="查看项目信息" :visible.sync='showProjectSync' :before-close="handleCloseDialog" width="80%">
    <el-steps :space="200" :active="projectMessage.projectStatus+1" finish-status="success" style="margin:0  200px 10px 200px">
      <el-step  v-for="item in statusShowOptions" :key="item" :title="item"></el-step>
    </el-steps>
    <div class="show-project__message">
      <el-card shadow="never" class="show-project__info">
        <div class="show-project__box">
          <el-descriptions class="margin-top" title="项目信息" :column="2" size="small" border>
            <el-descriptions-item>
              <template slot="label">项目名称 </template>
              {{this.projectMessage.projectName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目类型 </template>
              {{this.projectMessage.projectType}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目位置 </template>
              {{this.projectMessage.projectLocation}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">联系方式 </template>
              {{this.projectMessage.projectContact}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目状态 </template>
              <el-tag :type="statusTagType(this.projectMessage.projectStatus)" >{{statusShowOptions[projectMessage.projectStatus]}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">评审人数 </template>
              {{this.projectMessage.projectReviewNumber}}人
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">评审时间 </template>
              {{this.projectMessage.projectReviewTime}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目评分 </template>
              <span style="color: #C0C4CC" v-show="!projectMessage.projectScore">暂无评分</span>
              <el-rate v-show="projectMessage.projectScore" v-model="projectMessage.projectScore" disabled show-score text-color="#ff9900" :max=5 />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">创建人 </template>
              {{this.projectMessage.createUserName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">创建时间 </template>
              {{this.projectMessage.createTime}}
            </el-descriptions-item>

          </el-descriptions>
        </div>
      </el-card>
      <el-card shadow="never" class="show-project__content">
        <div v-show="this.projectMessage.projectContent" class="ql-editor">
          <p v-html="this.projectMessage.projectContent"></p>
        </div>
        <el-empty v-show="!this.projectMessage.projectContent" description="暂无项目简介"></el-empty>
      </el-card>
    </div>
  </el-dialog>
</div>
</template>
<script>
import store from '@/store'
import { mapState } from 'vuex'
import { GetProjectById, GetProjectInfoById } from '@/request/project/project-api'

export default {
  computed:{
    listenShowProjectId(){
      return store.state.ProjectEdit.showProjectId
    },
    ...mapState({
      showProjectSync:state=>state.ProjectEdit.showProjectSync,
      showProjectId:state=>state.ProjectEdit.showProjectId
    })
  },
  data(){
    return{
      activeName:'',
      statusShowOptions:['已登记','已设置条件,未抽取','已抽取','待评审','已评审','抽取失败','已取消'],
      statusTagTypes:['','','warning','warning','success','danger','info'],
      projectMessage:{}
    }
  },
  methods:{
    //初始化信息
    async init (id) {
      let res = await GetProjectInfoById(id);
      if (res&&res.code===200) {
        this.projectMessage = res.data
      }
    },
    //返回状态的标签样式
    statusTagType(status){
      return  this.statusTagTypes[status]
    },
    //关闭页面
    close(){
      store.commit('ProjectEdit/changeShowProjectSync',false)
      store.commit('ProjectEdit/changeShowProjectId',null)
    },
    //拦截关闭dialog
    handleCloseDialog () {
      this.$confirm('确定取消查看项目信息吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(() => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },
  },
  watch:{
    listenShowProjectId:{
      immediate:true,
      handler(val){
        if (val){
          this.init(val)
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
.show-project{
  .show-project__dialog{
    .show-project__message{
      display: flex;
      .el-card{
        width: 100%;
        max-height: 800px;
        overflow-y:scroll;
        margin: 0 20px;
      }
      .show-project__info{
        .show-project__box{
          margin-top: 20px;
          border:0.5px solid  #DCDFE6;
          padding: 10px;
          border-radius: 2px;
        }
      }
    }
  }
  /deep/ .el-dialog {
    border-radius: 10px;
  }


}
</style>
